<template>
  <div class="StoreDetail">
    <ContentBox title="认证信息" @left="back" :fixed="true" :ostyle="style">
      <template slot="oleft"><van-icon color="#000000" name="arrow-left"/></template>
    </ContentBox>
    <notice :top="$remToPx('0.88')" class="not"></notice>
    <div class="content">
      <div class="avater">
        <van-uploader
          v-model="fileList"
          :max-count="1"
          class="pic"
          accept="image/*"
          :after-read="uploadfile"
          :before-read="beforeUpload"
        >
          <van-button type="default" class="btn" :style="{backgroundImage: `url(${fileList.length > 0 ? fileList[0] : $img('img-bg.png')})`}"></van-button>
        </van-uploader>
      </div>
      <div class="info">
        <van-cell-group>
          <van-field v-model="form.name" input-align="center" label="商户名称" placeholder="请输入商户名称" />
        </van-cell-group>
        <van-field
          readonly
          clickable
          label="主营项目"
          :value="form.category | getCategoryNum"
           input-align="center"
          placeholder="请选择主营项目"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
        <van-cell-group>
          <van-field v-model="form.contact" input-align="center" label="联系人" placeholder="请输入联系人" />
        </van-cell-group>
        <van-cell-group>
          <van-field v-model="form.phone" input-align="center" label="联系号码" placeholder="请输入联系号码" />
        </van-cell-group>
        <van-cell-group>
          <van-field v-model="areaText" input-align="center" label="商户所在地区" placeholder="请选择地区" @click="getShowStatus"/>
        </van-cell-group>
        <van-cell-group>
          <van-field v-model="form.address"  input-align="center" label="商户所在地址"  placeholder="请输入商户所在地址" />
        </van-cell-group>

        <div class="intro">手持身份证照</div>
        <div class="id_card">
          <div class="context">
            <van-uploader
              v-model="fileCard1"
              :max-count="1"
              class="pic"
              accept="image/*"
              :deletable="showload1? false : true"
              :disabled="showload1? true : false"
              :style="{backgroundImage: `url(${fileCard1.length > 0 ? fileCard1[0] : $img('id_card3.png')})`}"
              :after-read="uploadfile"
              :before-read="beforeUploadSetKeysHandIdcard"
            >
              <van-button type="default" class="btn" :style="{backgroundImage: `url(${$img('img-bg.png')})`}"></van-button>
            </van-uploader>
          </div>
        </div>

        <div class="intro">营业执照</div>
        <div class="id_card">
          <div class="context">
            <van-uploader
              v-model="fileCard2"
              :max-count="1"
              class="pic"
              accept="image/*"
              :deletable="showload2? false : true"
              :disabled="showload2? true : false"
              :style="{backgroundImage: `url(${fileCard2.length > 0 ? fileCard2[0] : $img('id_card3.png')})`}"
              :after-read="uploadfile"
              :before-read="beforeUploadSetKeysLicense"
            >
              <van-button type="default" class="btn" :style="{backgroundImage: `url(${$img('img-bg.png')})`}"></van-button>
            </van-uploader>
          </div>
        </div>

        <div class="intro">商户简介</div>
        <van-cell-group>
          <van-field
            v-model="form.intro"
            rows="3"
            class="textarea"
            autosize
            type="textarea"
            placeholder="请输入商户简介"
            show-word-limit
          />
        </van-cell-group>
      </div>
      <div class="ensure" @click="apply">保存</div>
      <div class="address">
        <van-area
          :area-list="areaList"
          :columns-num="3"
          :columns-placeholder="['请选择', '请选择', '请选择']"
          v-if="showStatus"
          @confirm="save"
          @cancel="cancel"
        />
      </div>
    </div>
  </div>
</template>

<script>
import area from '@/assets/js/area.js'
import config from '@/config/config'
export default {
  data () {
    return {
      style: {
        background: '#ffffff',
        color: '#000'
      },
      fileList: [],
      areaList: [],
      form: {
        logo: '',
        name: '',
        category: '',
        contact: '',
        phone: '',
        province: '',
        city: '',
        country: '',
        intro: '',
        address: '',
        hand_idcard: '',
        license: ''
      },
      columns: [],
      showPicker: false,
      showStatus: false,
      areaText: '',
      data: [],
      formKeys: '',
      allow: 0,
      fileCard1: [],
      fileCard2: [],
      showload1: false,
      showload2: false
    }
  },
  filters: {
    getCategoryNum (data) {
      switch (data) {
        case 1:
          return '厨房卫浴'
        case 2:
          return '装修原料'
        default:
          return data
      }
    }
  },
  methods: {
    init () {
      this.$axios.get('/api/user/merchant').then(res => {
        console.log(res.data)
        if (res.status === 200) {
          this.form.name = res.data['name']
          this.form.category = res.data['category']
          this.form.contact = res.data['contact']
          this.form.phone = res.data['phone']
          this.form.intro = res.data['intro']
          this.form.province = res.data['province']
          this.form.city = res.data['city']
          this.form.country = res.data['country']
          this.form.address = res.data['address']
          this.form.hand_idcard = res.data['hand_idcard']
          this.form.license = res.data['license']
          if (this.form.province != null && this.form.city != null && this.form.country != null) {
            this.areaText = `${this.form.province}-${this.form.city}-${this.form.country}`
          }
          if (this.form.hand_idcard.indexOf('http') > -1) {
            this.showload1 = true
            this.fileCard1.push(
              {
                url: this.form.hand_idcard
              }
            )
          }
          if (this.form.license.indexOf('http') > -1) {
            this.showload2 = true
            this.fileCard2.push(
              {
                url: this.form.license
              }
            )
          }
          this.form.logo = res.data['logo']
          this.fileList.push({ url: this.form.logo.indexOf('http') > -1 ? this.form.logo : `${config.api}${this.form.logo}` })
        }
      })
    },
    getCategoryInfo () {
      this.$axios.get('/api/merchant_category').then(res => {
        if (res.status === 200) {
          this.data = res.data
          console.log(this.data)
          if (this.data != null) {
            this.data.forEach(item => {
              this.columns.push(item.name)
            })
          }
        }
      })
    },
    back () {
      this.$router.go(-1)
    },
    uploadfile (file) {
      this.$upload(file).then(res => {
        this.form[this.formKeys] = res[0]
      }).catch(err => {
        console.log(err)
      })
    },
    beforeUpload () {
      this.formKeys = 'logo'
      return true
    },
    onConfirm (value) {
      this.data.forEach(item => {
        if (item.name === value) {
          this.form.category = item.id
        }
      })
      this.showPicker = false
    },
    getShowStatus () {
      this.showStatus = true
    },
    beforeUploadSetKeysHandIdcard () {
      this.formKeys = 'hand_idcard'
      return true
    },
    beforeUploadSetKeysLicense () {
      this.formKeys = 'license'
      return true
    },
    save (value) {
      this.form.province = value[0].name
      this.form.city = value[1] ? value[1].name : ''
      this.form.country = value[2] ? value[2].name : ''
      this.areaText = `${this.form.province}-${this.form.city}-${this.form.country}`
      this.showStatus = false
    },
    cancel () {
      this.showStatus = false
    },
    apply () {
      Object.keys(this.form).filter(key => {
        return key !== 'hand_idcard' && key !== 'license'
      }).forEach(key => {
        if (this.form[key] === '') {
          this.$dialog({ message: '请把表单填写完整' })
          this.allow++
        }
      })
      if (this.allow > 0) {
        return
      }
      if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.form.phone)) {
        this.$dialog({ message: '手机格式不正确' })
        return
      }
      if (this.showload1 === true) {
        delete this.form['hand_idcard']
      }
      if (this.showload2 === true) {
        delete this.form['license']
      }
      console.log(this.form)
      this.$axios.post('/api/user/update_merchant_info', this.form).then(res => {
        if (res.status === 200) {
          this.$dialog({ message: '个人信息保存成功' })
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  created () {
    this.areaList = area
    this.init()
    this.getCategoryInfo()
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>
